<template >
  <div class="app-container conservePlan">
    <el-form :model="selectForm" ref="queryForm" :inline="true" label-width="120px">
      <el-form-item label="所属公司：">
        <treeselect v-if="deptOptions" class="option" v-model="selectForm.departmentId" :options="deptOptions" placeholder="请选择所属部门" />
      </el-form-item>
      <el-form-item label="计划名称：">
        <el-input size="small"  v-model="selectForm.planName" placeholder="请输入计划名称" clearable/>
      </el-form-item>
      <el-form-item label="计划单号：">
        <el-input size="small"  v-model="selectForm.planCode" placeholder="请输入计划单号" clearable/>
      </el-form-item>
      <el-form-item label="设备名称：">
        <el-input size="small"  v-model="selectForm.deviceName" placeholder="请输入设备名称" clearable/>
      </el-form-item>
      <el-form-item label="设备编号：">
        <el-input size="small"  v-model="selectForm.deviceCode" placeholder="请输入设备编号" clearable/>
      </el-form-item>
      <el-form-item label="责任人：">
        <el-input size="small"  v-model="selectForm.chargeUserName" placeholder="请输入责任人" clearable/>
      </el-form-item>
      <el-form-item label="养护类别：">
        <el-select size="small" v-model="selectForm.conserveType" placeholder="请选择" clearable>
          <el-option
            v-for="item in maintainType"
            :key="item.dictCode"
            :label="item.dictLabel"
            :value="item.dictCode"
          />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button size="mini" type="primary" icon="el-icon-search" @click="selectForm.pageNum=1;getList();">搜索</el-button>
        <el-button size="mini" type="success" icon="el-icon-plus" @click="add">添加</el-button>
        <el-button size="mini" type="info" icon="el-icon-upload">导入</el-button>
        <el-button size="mini" type="warning" icon="el-icon-download" @click="exportList">导出</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" ref="singleTable" :data="list" stripe border :default-sort = "sort" highlight-current-row @current-change="currentChange">
      <el-table-column align="center" type="index" label="序号" width="55"/>
      <el-table-column align="center" label="计划单号" width="150" sortable prop="planCoder">
        <template slot-scope="scope">
          <div class="bule"  @click="details(scope.row)">{{scope.row.planCoder}}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="计划名称" prop="planName" sortable/>
      <el-table-column align="center" label="设备名称" prop="deviceName"  sortable/>
      <el-table-column align="center" label="设备编号" prop="deviceCoder" sortable />
      <el-table-column align="center" label="养护类型" prop="conserveTypeName">

      </el-table-column>
      <el-table-column align="center" label="责任人" prop="nickname" sortable/>
      <el-table-column align="center" label="保养周期" prop="circleCycle" sortable>
        <template slot-scope="scope">
          {{scope.row.circleCycle}}
          <template v-if="scope.row.circleUnit==1">天</template>
          <template v-if="scope.row.circleUnit==2">周</template>
          <template v-if="scope.row.circleUnit==3">月</template>
        </template>
      </el-table-column>
      <el-table-column align="center" label="提前提醒时间"  prop="noticeDate" sortable>
        <template slot-scope="scope">
          {{scope.row.noticeCycle}}
          <template v-if="scope.row.noticeUnit==1">天</template>
          <template v-if="scope.row.noticeUnit==2">周</template>
          <template v-if="scope.row.noticeUnit==3">月</template>
        </template>
      </el-table-column>
      <el-table-column align="center"  width="160"  sortable>
        <template slot="header" slot-scope="scope">
          <p>完成度<br>（实际完成/已过周期）</p>
        </template>
        <template slot-scope="scope">
          {{scope.row.realityacComplish}}/{{scope.row.haveExpired}}
        </template>
      </el-table-column>
      <el-table-column label="开始执行时间" align="center" prop="startDate" sortable>
        <template slot-scope="scope">
          <span>{{ scope.row.startDate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="结束时间" align="center" prop="endDate" sortable>
        <template slot-scope="scope">
          <span>{{ scope.row.endDate }}</span>
        </template>
      </el-table-column>
        <el-table-column label="启用" align="center" prop="isStart" sortable>
        <template slot-scope="scope">
          <template v-if="scope.row.isStart==1">是</template>
          <template v-if="scope.row.isStart==0">否</template>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center"  fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" icon="el-icon-edit" @click="edit(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total="total"
      :page.sync="selectForm.pageNum"
      :limit.sync="selectForm.pageSize"
      @pagination="getList"
    />
    <el-drawer title="养护详情" :before-close="drawerClose" :modal="false" :visible.sync="drawer">
      <div class="drawer" v-if="detailData">
        <p>
          <span class="title">计划编号</span>
          {{detailData.maintainCode}}
        </p>
        <p>
          <span class="title">计划名称</span>
          {{detailData.maintainName}}
        </p>
        <p>
          <span class="title">养护类型</span>
          <template v-if="detailData.maintainType==1">日常自主保全</template>
          <template v-if="detailData.maintainType==2">一级保全</template>
          <template v-if="detailData.maintainType==3">二级保全</template>
          <template v-if="detailData.maintainType==4">项修计划</template>
          <template v-if="detailData.maintainType==5">大修计划</template>
          <template v-if="detailData.maintainType==6">其他养护</template>
        </p>
        <p>
          <span class="title">责任人</span>
          {{detailData.chargeUser}}
        </p>
        <h4>最新任务</h4>
        <p>
          <span class="title">任务状态</span>
          <span class="bule">已执行</span>
        </p>
        <p>
          <span class="title">执行时间</span>
          <span class="bule">{{ parseTime(detailData.startDate) }}</span>
        </p>
        <p>
          <span class="title">养护费用</span>0.0
        </p>
        <p>
          <span class="title">养护描述</span>
          {{detailData.maintainInfo}}
        </p>
      </div>
    </el-drawer>
  </div>
</template>

<script>
  import {treeselect } from "@/api/system/dept";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import {conserveplanList,conserveplanExport,conserveType} from '@/api/curing/index'

  export default {
    name: "conservePlan.vue",
    components:{
      Treeselect,
    },
    data() {
      return {
        treedata: [],
        defaultProps: {
          children: "children",
          label: "label"
        },
        deptOptions:'',

        loading: false,//加载
        selectForm: {
          departmentId:undefined,
          planName:null,
          planCode:null,
          deviceCode:null,
          deviceName:null,
          chargeUserName:null,
          conserveType:null,
          pageNum: 1,
          pageSize: 10,
        },
        list: [],
        total: 0,
        maintainType:[],
        sort:{prop: 'maintainCode', order: 'descending'},
          // [{prop: 'maintainCode', order: 'descending'},
          // {prop: 'maintainName', order: 'descending'},
          // {prop: 'deviceId', order: 'descending'},
          // {prop: 'deviceName', order: 'descending'},
          // {prop: 'chargeUser', order: 'descending'},
          // {prop: 'circleDate', order: 'descending'},
          // {prop: 'validDate', order: 'descending'},
          // {prop: 'noticeDate', order: 'descending'},
          // {prop: 'startDate', order: 'descending'},
          // {prop: 'endDate', order: 'descending'},
          // {prop: 'enablePlan', order: 'descending'}],
        selectDate: '',//时间
        drawer:false,//单机
        detailData:'',//单击详情
      }
    },
    created() {
      this.getTreeselect()
      this.getconserveType()
      this.getList()
    },
    methods: {
      /** 查询类别下拉树结构 */
      getTreeselect() {
        treeselect().then(response => {
          this.deptOptions = response.data;
        });
      },
      getconserveType(){
        conserveType().then((res)=>{
          this.maintainType=res.data
        })
      },
      getList() {
        //获取计划列表
        conserveplanList(this.selectForm).then(res => {
          if(res.code==200){
            this.list = res.rows
            this.total = res.total
          }
        });
      },
      exportList(){
        //导出
        this.$confirm('是否确认导出?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          let res = await conserveplanExport(this.selectForm)
          return this.download(res.data)
        }).catch(function() {
        })
      },
      edit(row) {
        this.$router.push({path:'/conserve/conservePlanAdd',query:{id:row.id}});
      },
      add(){
        this.$router.push({path:'/conserve/conservePlanAdd'});
      },
      details(row){
        this.$router.push({path:'/conserve/conservePlanDetail',query:{id:row.id}});
      },
      //遮罩层
      currentChange(row){
        this.detailData=row;
        this.drawer=true
      },
      //关闭前
      drawerClose(done){
        this.$refs.singleTable.setCurrentRow();
        done();
      }
    }
  }
</script>

<style  lang="scss">
  .conservePlan {
    .option{
      width: 200px;
      height:32px;
      .vue-treeselect__control{
        line-height: 32px;
        height:32px !important;
      }
    }
    .bule {
      color: #2196F3;
      cursor: pointer;
      z-index: 100;
    }
    .el-drawer__header {
      margin-bottom: 0px;
      color: #05A380;
      font-weight: bold;
    }
    .drawer {
      margin-left: 10px;
      h4:first-child{
        //margin: -18px 0 0px 0 !important;
      }

      h4 {
        color: #05A380;
        padding:0 0 20px 10px;
        border-bottom: 1px solid #ddd
      }
      p{
        font-size: 14px;
        line-height: 30px;
        padding-left:10px;
        .title{
          display: inline-block;
          width:100px;
        }
      }
    }
  }
</style>
